﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>销售订单详情</title>
    <script src="~/lib/vue/vue.global.min.js"></script>
    <script src="~/lib/element-plus/index.full.js"></script>
    <link href="~/lib/element-plus/index.min.css" rel="stylesheet" />
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <style>
        body {
            background-color: #f5f7fa;
            margin: 0;
            padding: 0;
            font-family: "Microsoft YaHei", sans-serif;
        }

        .container {
            width: 95%;
            margin: 20px auto;
            background-color: #fff;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
            position: relative;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #ebeef5;
        }

        .header {
            font-size: 20px;
            font-weight: bold;
        }

        .btn-group {
            display: flex;
            gap: 10px;
        }

        .info-section {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
        }

        .info-table {
            width: 100%;
            border-collapse: collapse;
        }

            .info-table td {
                padding: 8px 0;
                vertical-align: top;
            }

        .info-label {
            width: 100px;
            color: #333;
        }

        .info-value {
            color: #666;
        }

        .status-area {
            position: absolute;
            top: 120px;
            right: 40px;
        }

        .status-label {
            color: #999;
            font-size: 14px;
            text-align: right;
            margin-bottom: 4px;
        }

        .status-value {
            font-weight: bold;
            color: #000;
        }

        .tab-container {
            margin-top: 20px;
        }

        .attachment-list {
            margin-top: 10px;
        }

            .attachment-list a {
                display: block;
                margin-bottom: 8px;
                color: #409EFF;
                text-decoration: none;
            }

                .attachment-list a:hover {
                    text-decoration: underline;
                }
    </style>
</head>

<body>
    <div class="container">
        <el-loading v-loading="loading" element-loading-text="加载中...">
            <div class="header-container">
                <div class="header">
                    销售单号：<span>{{ detail.sales_order_no }}</span>
                </div>
                <div class="btn-group">
                    <el-button type="primary" size="small">编辑</el-button>
                    <el-button size="small">删除</el-button>
                    <el-button size="small">审核</el-button>
                    <el-button size="small" v-on:click="goBack">关闭</el-button>
                    <el-button size="small">复制</el-button>
                    <el-button size="small">打印</el-button>
                </div>
            </div>

            <div class="status-area">
                <div class="status-label">单据状态</div>
                <div class="status-value">{{ formatDocumentStatus(detail.document_status) }}</div>
            </div>

            <div class="info-section">
                <table class="info-table">
                    <tr>
                        <td class="info-label">制单人</td>
                        <td class="info-value">{{ detail.user_name }}</td>
                        <td class="info-label">所在部门</td>
                        <td class="info-value">{{ detail.department }}</td>
                        <td class="info-label">制单时间</td>
                        <td class="info-value">{{ formatDateTime(detail.create_time) }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">进货日期</td>
                        <td class="info-value"> </td>
                        <td class="info-label">客户名称</td>
                        <td class="info-value">{{ detail.customer_name }}</td>
                        <td class="info-label">联系人</td>
                        <td class="info-value">{{ detail.contact_person }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">联系方式</td>
                        <td class="info-value">{{ detail.contact_phone_number }}</td>
                        <td class="info-label">销售部门</td>
                        <td class="info-value">{{ detail.organization_name }}</td>
                        <td class="info-label">销售负责人</td>
                        <td class="info-value">{{ detail.user_name1 }}</td>
                    </tr>
                    <tr>
                        <td class="info-label">备注</td>
                        <td colspan="5" class="info-value">{{ detail.note }}</td>
                    </tr>
                </table>
            </div>

            <div class="tab-container">
                <el-tabs v-model="activeTab" size="small">
                    <el-tab-pane label="其他信息" name="other">
                        <div class="info-section">
                            <div class="info-label">附件</div>
                            <div class="attachment-list">
                                <a href="#">文件标签.txt</a>
                              
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="销售明细" name="goods">
                        <div class="info-section">
                            <el-table border style="width: 100%;" size="small">
                                <el-table-column prop="product_name" label="货品名称" width="180"></el-table-column>
                                <el-table-column prop="product_code" label="货品编号" width="120"></el-table-column>
                                <el-table-column prop="specification_model" label="规格型号" width="150"></el-table-column>
                                <el-table-column prop="unit" label="单位" width="80"></el-table-column>
                                <el-table-column prop="prod_num" label="数量" width="80" align="right"></el-table-column>
                                <el-table-column prop="selling_unit_price" label="销售单价" width="100" align="right"></el-table-column>
                                <el-table-column prop="saleamount" label="销售金额" width="120" align="right"></el-table-column>
                                <el-table-column prop="note" label="备注" width="150"></el-table-column>
                            </el-table>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="出库记录" name="outbound">
                        <div class="info-section">
                            <el-empty description="暂无出库记录"></el-empty>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="退货记录" name="return">
                        <div class="info-section">
                            <el-empty description="暂无退货记录"></el-empty>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="操作记录" name="operation">
                        <div class="info-section">
                            <el-empty description="暂无操作记录"></el-empty>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="审核记录" name="audit">
                        <div class="info-section">
                            <el-empty description="暂无审核记录"></el-empty>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-loading>
    </div>

    <script>
        const { createApp, ref, reactive, onMounted } = Vue;
        const app = createApp({
            setup() {
               const loading = ref(true);
                const activeTab = ref('other');
                const detail = reactive({});
                
                  // 从URL获取销售单号
                const saleOrderNo = new URLSearchParams(window.location.search).get('saleOrderNo');


            // 加载详情数据
                const loadDetail = async () => {
                    try {
                        const response = await axios.get('/SalesOrder/GetSalesOrderDetail', {
                            params: { saleOrderNo }
                        });
                        Object.assign(detail, response.data);
                        loading.value = false;
                    } catch (err) {
                        console.error('加载详情失败:', err);
                        ElementPlus.ElMessage.error('数据加载失败，请重试');
                        loading.value = false;
                    }
                };


                // 仅显示年月日
                const formatDate = (dateStr) => {
                    if (!dateStr) return '';
                    const date = new Date(dateStr);
                    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
                };

                // 显示年月日 时分秒
                const formatDateTime = (dateStr) => {
                    if (!dateStr) return '';
                    const date = new Date(dateStr);
                    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}:${String(date.getSeconds()).padStart(2, '0')}`;
                };

                 // 单据状态数字转中文
                const formatDocumentStatus = (status) => {
                    const statusMap = {
                        '1': '草稿',
                        '2': '待审核',
                        '3': '驳回',
                        '6': '未出库',
                        '7': '部分出库',
                        '4': '已完成',
                        '5': '未入库',
                        '8': '部分入库'
                    };
                    return statusMap[status] || '未知状态';
                };


        // 定义返回Index页面的方法
        const goBack = () => {
            // 跳转到销售订单列表页（根据实际项目的Index页面路径调整）
            window.location.href = '/SalesOrder/Index';
        };

            
            

                onMounted(() => {
                    loadDetail();
                });

                return {
                   detail,
                    loading,
                    activeTab,
                    formatDate,
                    formatDateTime,
                    formatDocumentStatus,
                    goBack,
                };
            }
        });

        app.use(ElementPlus);
        app.mount('.container');
    </script>
</body>
</html>